<template>
  <div>
    <!-- 浮动导航 -->
    <div class="float-link-container">
      <FloatMallLinkComponent/>
    </div>

    <!-- 页面主体 -->
    <div class="main-container">
      <div class="user-about-main">
        <div class="user-about-main-inner">
          <el-menu :default-active="nowUserAboutId" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">修改密码</el-menu-item>
            <el-menu-item index="2">个人资料</el-menu-item>
            <el-menu-item index="3">上传头像</el-menu-item>
          </el-menu>
          <el-form v-if="nowUserAboutId==='1'" :model="passwordForm" status-icon :rules="passwordRules"
                   label-width="100px" class="now-from">
            <el-form-item label="旧密码" prop="oldPassword">
              <el-input prefix-icon="el-icon-key" v-model="passwordForm.oldPassword" autocomplete="off" width="150px">
              </el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="password">
              <el-input prefix-icon="el-icon-key" type="password" v-model="passwordForm.password" autocomplete="off"
                        width="150px">
              </el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input prefix-icon="el-icon-key" type="password" v-model="passwordForm.confirmPassword"
                        autocomplete="off" width="150px">
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button class="from-bnt" type="primary" @click="submitForm('passwordForm')">提交</el-button>
            </el-form-item>
          </el-form>

          <el-form v-if="nowUserAboutId==='2'" :model="userInfoForm" status-icon :rules="userInfoForm"
                   label-width="100px" class="now-from">

          </el-form>
          <el-form v-if="nowUserAboutId==='3'" :model="userImgForm" status-icon :rules="userImgForm" label-width="100px"
                   class="now-from">

          </el-form>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import FloatMallLinkComponent from '@/components/FloatMallLinkComponentView.vue';
import httpApi from "@/http";

export default {
  components: {
    FloatMallLinkComponent
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.passwordForm.confirmPassword !== '') {
          this.$refs.passwordForm.validateField('confirmPassword');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.passwordForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      nowUserAboutId: 1,
      // 注册表单
      passwordForm: {
        oldPassword: '',
        confirmPassword: '123456',
        password: '123456',
      },
      userInfoForm: {},
      userImgForm: {},
      // 表单规则
      passwordRules: {
        oldPassword: [
          {required: true, message: '请输入旧密码', trigger: 'blur'},
          {min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur'},
        ],
        password: [
          {required: true, message: '请输入新密码', trigger: 'blur'},
          {min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur'},
          {validator: validatePass, trigger: 'blur'}
        ],
        confirmPassword: [
          {required: true, message: '请输入确认密码', trigger: 'blur'},
          {min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur'},
          {validator: validatePass2, trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    loadPageTitle() {
      this.pageTitle = '茶叶商城 - 学茶商城网';
      document.title = this.pageTitle;
    },
    loadDefaultSearchKeywords() {
      let defaultSearchKeywords = '大红袍';
      this.defaultSearchKeywords = defaultSearchKeywords;
    },
    loadSearchSuggestKeywords() {
      let searchSuggestKeywords = ['车载杯', '煮茶壶', '铁观音', '五宝茶', '小青柑', '苦荞茶'];
      this.searchSuggestKeywords = searchSuggestKeywords;
    },
    changeUserAboutId() {
      console.log(this.$router.currentRoute.query.id)
      this.nowUserAboutId = this.$router.currentRoute.query.id;
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      this.nowUserAboutId = key;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (formName === 'passwordForm') {

          }
          if (formName === 'userInfoForm') {

          }
          if (formName === 'userImgForm') {

          }
        } else {
          console.log('error submit!!');
          return false;
        }

      });
    },

  },
  mounted() {
    this.loadPageTitle();
    this.loadDefaultSearchKeywords();
    this.loadSearchSuggestKeywords();

  },
  created() {
    this.changeUserAboutId();
  }
}
</script>

<style>
/*通用的去ul默认格式*/
ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: #4caf50;;
}

body {
  font-family: "微软雅黑", "黑体";
}

.main-container {
  text-align: left !important;
  width: 1200px;
  margin: 0 auto;
}

.user-about-main {
  margin-top: 24px;
  min-height: 400px;
  background-color: #fff;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  -ms-border-radius: 24px;
  border-radius: 24px;
  overflow: hidden;
}

.user-about-main-inner {
  padding: 40px;
}

.now-from {
  padding: 20px 50px 20px 0px;
}

</style>
